<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			.mui-content {
				font-size: 13px;
				background-color: #fff;
			}
			
			.flex {
				display: flex;
				margin-top: 5px;
			}
			
			.flex-item {
				flex: 1;
			}
			
			.add-goods-type {
				margin-top: 8px;
				padding-bottom: 2px;
				position: relative;
				font-size: 13px;
			}
			
			.add-goods-type p {
				margin-bottom: 2px;
			}
			
			.add-goods-type:after {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.apply-id {
				margin-left: 15px;
			}
			
			.status {
				float: right;
				margin-right: 5px;
				font-size: 13px;
				color: red;
			}
			/*列表*/
			
			.goods-list {
				list-style: none;
			}
			
			.goods-each {
				padding: 5px 5px;
				position: relative;
			}
			.title-box {
				background-color: #F8F8F8;
				height: 30px;
				line-height: 30px;
			}
			
			.img-box-title {
				flex: 2;
				text-align: center;
			}
			
			.number-title {
				flex: 4;
				text-align: center;
			}
			
			.op-title {
				flex: 3;
				text-align: center;
			}
			.bgGray {
				background-color: #F8F8F8;
			}
			.img-box {
				flex: 2;
			}
			
			.img-box img {
				height: 70px;
				width: 70px;
				vertical-align: middle;
				text-align: center;
			}
			
			.goods-info-box {
				flex: 4;
				font-size: 14px;
				line-height: 24px;
			}
			
			.goods-info-box div {
				margin-left: 5px;
			}
			
			.goods-op-box {
				flex: 3;
				position: relative;
			}
			/*申请*/
			
			.apply-info {
				flex: 2;
				font-size: 14px;
				line-height: 24px;
			}
			
			.change-btn-box {
				flex: 1;
				position: relative;
			}
			
			.choose-btn {
				width: 70%;
				position: absolute;
				bottom: 2px;
				right: 5px;
			}
			
			.max-apply {
				position: absolute;
				bottom: 2px;
				right: 5px;
			}
			
			.apply-num {
				position: absolute;
				font-weight: 700;
				bottom: 24px;
				right: 5px;
				color: red;
			}
			/**/
			
			.choose-icon {
				position: absolute;
				right: 35px;
			}
			/*滚动区*/
			
			.mui-scroll-wrapper {
				top: 58px;
			}
			/*底部*/
			
			footer {
				height: 38px;
				line-height: 38px;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				font-size: 15px
			}
			
			footer:before {
				content: '';
				height: 1px;
				position: absolute;
				right: 0;
				bottom: 38px;
				width: 100%;
				transform: scaleY(.5);
				background-color: #acacb4;
			}
			
			.back-btn {
				background-color: #666666;
				color: #fff;
			}
			
			.next-btn {
				background-color: #5677FC;
				color: #fff;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="add-goods-type">
				<p>
					<span class="apply-id">转发单号：</span>
					<span class="status"></span>
				</p>
				<p class="to-store">&emsp;目标门店：<span></span></p>
			</div>
			<!---->
			<div id="refreshContainer" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="goods-list mui-table-view mui-table-view-chevron">
						<script id="goodsLi" type="text/html">
							<div class="flex title-box">
								<div class="img-box-title">货品</div>
								<div class="number-title">申请</div>
								<div class="op-title">实收</div>
							</div>
							<% for(var i=0;i<list.length;i++ ){ %>
							<%if(i%2===0){%>
							<li class="goods-each mui-clearfix">
								<%}else {%>
								<li class="goods-each bgGray mui-clearfix">
									<%}%>
									<div class="flex">
										<div class="img-box">
											<a href="#middlePopover" class="img-info" index="<%=i%>"><img src="<%=imgPath + list[i].cutImg%>" alt="" /></a>
										</div>
										<div class="goods-info-box">
											<div class="goods-name">
												<%=list[i].goodsName%>
											</div>
											<div class="goods-id">货品ID：
												<%=list[i].goodsId%>
											</div>
											<div class="goods-num">转发：
												<%=list[i].conversionAmount%>
											</div>
										</div>
										<div class="goods-op-box">
											<div class="flex">
												<span class="max-apply">门店实收：<%=list[i].recivedAmount%></span>
												<span class="apply-num">误差：<%=list[i].recivedAmount - list[i].conversionAmount%></span>
											</div>
										</div>
									</div>
								</li>
								<%}%>
						</script>

					</ul>
				</div>
			</div>
		</div>
		<!--显示附加信息-->
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="fullName">规格：<span></span></p>
					<p class="tags">用途：<span></span></p>
					<p class="score">积分：<span></span></p>
				</div>
			</div>
		</div>
		<!---->
	</body>
	<script src="../config.js"></script>
	<script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../config.js"></script>
	<script>
		(function($, doc) {
			$.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等					
					//					up: {
					//						height:'50px',
					//						auto:true,
					//						contentrefresh: '正在加载...',
					//						contentnomore:'没有更多数据了',
					//						callback: pullupRefresh
					//					}
				}
			})
			$.plusReady(function() {
				receiveParams()
			})
			$.ready(function() {
				bindEvent()
			})
			var conversionGoods = [],
				status = ''

			function pullupRefresh() {
				setTimeout(function() {
					$('#pullrefresh').pullRefresh().endPulldownToRefresh();
				}, 2000)
			}
			//渲染页面
			function setPage(goodsList) {
				var html = template('goodsLi', {
					list: goodsList,
					imgPath: config.imgPath,
					status: status
				})
				$('.goods-list')[0].innerHTML = html
			}
			//接收传值
			function receiveParams() {
				var self = plus.webview.currentWebview();
				currentShopObj = self.currentShopObj;
				conversionGoods = self.conversionGoods
				conversionId = self.conversionId
				toStoreName = self.toStoreName
				status = self.status - 0
				setTimeout(function() {
					document.querySelector(".apply-id").innerHTML = '转发单号：' + self.conversionId
					document.querySelector(".to-store span").innerText = toStoreName
					var text = ''
					if(status === 1) {
						text = '已发货'
					} else if(status === 2) {
						text = '其他门店已收货'
					}
					document.querySelector(".status").innerText = text
					setPage(conversionGoods)
				}, 0)
			}

			//绑定
			function bindEvent() {
				//滚动
				$('.mui-scroll-wrapper').scroll({
					scrollY: true,
					startX: 0, //初始化时滚动至x
					startY: 0, //初始化时滚动至y
					bounce: true,
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
				});
			}
			//显示用途
			$('.goods-list').on('tap', '.img-info', function(e) {
				var ind = this.getAttribute('index')
				var typeFullName = refundGoodsList[ind].type
				var tags = ''
				refundGoodsList[ind].tags.forEach(function(item) {
					tags += item.tagDescribe + ' '
				})
				document.querySelector(".fullName span").innerText = typeFullName
				document.querySelector(".tags span").innerText = tags
				document.querySelector(".score span").innerText = refundGoodsList[ind].score
			})
		}(mui, document))
	</script>
	</body>

</html>